<template>
  <el-drawer
    title="分类编辑"
    direction="rtl"
    :before-close="handleClose"
    v-model="visibilityBinding"
    size="35%"
  >
    <el-row style="margin-top: 20px">
      <el-col :span="24">
        <span style="width: 100px" class="demonstration">修改分类：</span>
        <el-input
          placeholder="填写分类名称"
          v-model="props.editData.content"
          class="form-search-input"
        >
        </el-input>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-button type="warning" @click="handleEdit()"> 重置 </el-button>
      <el-button type="primary" style="margin-left: 20px" @click="handleEdit()">
        提交
      </el-button>
    </el-row>
  </el-drawer>
</template>

<script setup>
const props = defineProps(['visibilityBinding', 'flag', 'editData'])
const emits = defineEmits(['handleCloseEmits', 'handleEditEmits'])
const input2 = ref('')
onMounted(() => {
  input2.value = props.editData.content
})

const handleClose = (visibilityBinding) => {
  visibilityBinding = false
  emits('handleCloseEmits', visibilityBinding)
}
const handleEdit = () => {
  input2.value = props.editData.content
  let info = {
    id: props.editData.id,
    content: input2.value
  }
  emits('handleEditEmits', info)
}
</script>

<style lang="scss" scoped>
.form-drawer {
  padding: 20px;
}
.form-search {
  display: flex;
  align-content: center;
  justify-content: right;
}
.form-search-input {
  text-align: right;
  width: 200px;
}
.form-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 20px auto;
}
.edit {
  padding: 20px 0;
}
.form-drawer {
  padding: 20px;
}
</style>
